<template>
  <van-nav-bar title="创建订单" left-arrow @click-left="$route.back()">
    <template #right>
      <van-icon name="ellipsis" size="18" />
    </template>
  </van-nav-bar>
  <router-link to="/addressList">
    <div class="address-wrap">
      <div class="name">
        <span>{{ receiver.name }}</span>
        <span>{{ receiver.tel }}</span>
      </div>
      <van-icon name="arrow" />
      <div class="address">
        <span>{{ receiver.address }}</span>
      </div>
    </div>
  </router-link>
  <div class="card">
    <van-card
      v-for="item in cartgoods"
      :key="item.goodsId"
      :num="item.goodsCount"
      :price="item.sellingPrice"
      :title="item.goodsName"
      :thumb="item.goodsCoverImg"
    />
  </div>

  <van-submit-bar
    :price="totalprice * 100"
    button-text="生成订单"
    @submit="onSubmit"
  />
  <van-popup
    v-model:show="popupshow"
    position="bottom"
    round
    :style="{ height: '25%' }"
  >
    <template #default>
      <div class="buy-box">
        <div class="pay" @click="payandgoorder(item)" v-for="item in payment">
          {{ item.name }}
        </div>
        <div class="ancel" @click="cancelpay">取消</div>
      </div>
    </template>
  </van-popup>
</template>
<script setup>
import {
  getAddressDetail,
  getordercart,
  createorder,
  paysuccess,
} from "@/api/index.js";
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { showSuccessToast, } from "vant";
let route = useRoute();
let router = useRouter();
let receiver = reactive({
  name: "", //收货人姓名
  tel: "", //收货人电话
  address: "", //收货人地址
  orderNo: "", //生成的订单号
});
let popupshow = ref(false); //控制弹出层显示隐藏
let cartgoods = ref([]); //商品数据
let totalprice = ref(0); //总价
let cartgoodsids = ref([]);
let payment = reactive([{ name: "微信支付" }, { name: "支付宝支付" }]); //支付方式
onMounted(() => {
  getaddress();
  getmyordercart();
});

//获取地址数据
let getaddress = async () => {
  let res = await getAddressDetail(route.query.addressId);
  if (res.resultCode == 200) {
    receiver.name = res.data.userName;
    receiver.tel = res.data.userPhone;
    receiver.address =
      res.data.provinceName +
      res.data.cityName +
      res.data.regionName +
      res.data.detailAddress;
  }
};
let getmyordercart = () => {
  let ids = localStorage.getItem("cartcheckedids");
  cartgoodsids.value = ids;
  getordercart(cartgoodsids.value).then((res) => {
    if (res.resultCode == 200) {
      cartgoods.value = res.data;
    }
    totalprice.value = cartgoods.value.reduce((prev, next) => {
      return prev + next.sellingPrice * next.goodsCount;
    }, 0);
  });
};
//生成订单
let onSubmit = () => {
  popupshow.value = true;
  
  let ids =cartgoodsids.value.split(",")
  createorder(route.query.addressId, ids).then((res) => {
    console.log(res);
    if (res.resultCode == 200) {
      receiver.orderNo = res.data;
    }
  });
};
//点击微信支付或支付宝支付
let payandgoorder = (item) => {
  if (item.name == "微信支付") {
    paysuccess(receiver.orderNo, 1).then((res) => {
      if (res.resultCode == 200) {
        showSuccessToast("微信支付成功");
        setTimeout(() => {
          router.push("/order");
        }, 500);
      }
    });
  } else {
    paysuccess(receiver.orderNo, 2).then((res) => {
      if (res.resultCode == 200) {
        showSuccessToast("支付宝支付成功");
        setTimeout(() => {
          router.push("/order");
        }, 500);
      }
    });
  }
};
// 取消支付
let cancelpay = () => {
  router.push("/order");
};
</script>

<style lang="less" scoped>
.buy-box {
  height: 100%;
  .pay {
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 3px solid #f7f8fa;
  }
  .ancel {
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 5px solid #f7f8fa;
  }
}
/deep/.van-submit-bar__button {
  width: 50%;
}
.card {
  padding-bottom: 50px;
}
.address-wrap {
  margin-bottom: 0.53333rem;
  background: #fff;
  position: relative;
  font-size: 0.37333rem;
  padding: 0.63rem 0.4rem 0.66667rem;
  color: #222333;

  .name {
    display: flex;
    justify-content: left;
    margin: 0.26667rem 0 0.27667rem;
    line-height: 0.37333rem;

    span:nth-child(1) {
      margin-right: 0.04rem;
    }
  }

  .address {
    display: flex;
    justify-content: left;
    line-height: 0.37333rem;
  }

  .van-icon {
    position: absolute;
    right: 0.26667rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 0.53333rem;
  }
}

.address-wrap::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.05333rem;
  background: -webkit-repeating-linear-gradient(
    135deg,
    #ff6c6c,
    #ff6c6c 20%,
    transparent 0,
    transparent 25%,
    #1989fa 0,
    #1989fa 45%,
    transparent 0,
    transparent 50%
  );
  background: repeating-linear-gradient(
    -45deg,
    #ff6c6c,
    #ff6c6c 20%,
    transparent 0,
    transparent 25%,
    #1989fa 0,
    #1989fa 45%,
    transparent 0,
    transparent 50%
  );
  background-size: 2.13333rem;
  content: "";
}
</style>
